<template>
	<view>
		<u-calendar
			ref="calendar"
			v-model="showDate"
			:max-date="getTime(7)"
			:min-date="getTime(1)"
			@change="changeTime"
		></u-calendar>
		<view @click="showDate = true" class="date_new">{{
			newDate == '' ? getTime(1) : newDate
		}}</view>
		<view v-for="(item, index) in dataList" :key="index">
			<view style="font-size: 18px">
				<view
					>姓名：<text style="margin-left: 50rpx">{{
						item.clinicMaster.name
					}}</text></view
				>
				<view
					>性别：<text style="margin-left: 50rpx">{{
						item.clinicMaster.sex
					}}</text></view
				>
				<view
					>科室：<text style="margin-left: 50rpx">{{
						item.clinicMaster.clinicName
					}}</text></view
				>
				<view
					>年龄：<text style="margin-left: 50rpx">{{
						item.clinicMaster.ageStr
					}}</text></view
				>
			</view>
			<view class="doctor_number">
				<view class="box_border" style="margin-top: 0">
					<view>您当前就诊号为</view>
					<view class="Number_class">{{ item.clinicMaster.visitNo }}</view>
				</view>
				<view class="box_border" style="border: none">
					<view>距您当前号码剩余</view>
					<view
						><text class="Number_class">{{ item.currentOrder }}</text
						>个号</view
					>
				</view>
				<view class="box_border">
					<view>预计等待时间</view>
					<view
						><text class="Number_class">{{ item.estimatedTime }}</text></view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import getTime from '../../utils/time'
import { clinicReminder } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			showDate: false,
			newDate: '',
			nowDate: '', // 当前日期
			nowTime: '', // 当前时间
			dataList: [],
		}
	},
	onLoad() {
		this.clinicRemindeList(
			'100145',
			'ac78026c131c4b6387a41f6cd9948ecc',
			'71422ad6f86f11e9b9b6005056b39630',
			'1',
			'2021-11-08',
			'2021-11-08',
		)
	},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
			patientId: state => state.patientId,
		}),
	},
	mounted() {
		this.$nextTick(() => {
			this.$refs.calendar.activeDate = getTime(1)
		})
	},
	methods: {
		getTime,
		clinicRemindeList(
			orgCode,
			patientId,
			deptId,
			clinicType,
			queryStartDate,
			queryEndDate,
		) {
			clinicReminder({
				orgCode: orgCode,
				patientId: patientId,
				deptId: deptId,
				clinicType: clinicType,
				queryStartDate: queryStartDate,
				queryEndDate: queryEndDate,
			}).then(({ data, head }) => {
				console.log(data.data[0].clinicMaster.currentOrder, head, '123')
				this.dataList = data.data
			})
		},
		changeTime(e) {
			console.log(e)
			this.newDate = e.result
		},
	},
}
</script>

<style lang="scss">
.doctor_number {
	color: #000;
	text-align: center;
	font-size: 50rpx;
	font-weight: bold;
	.box_border {
		margin: 30rpx 0;
		border-bottom: 2rpx solid;
		border-top: 2rpx solid;
		padding: 20rpx;
	}
	.Number_class {
		color: red;
		font-size: 90rpx;
	}
}
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 16px;
	/* display: inline-block; */

	text-align: center;
}
</style>